<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="userInfo.avatar" alt="" class="avatar" />
        <div class="bottom">
          <p>
            <span>{{ currentDate }}</span>
            <span>{{ currentTime }}</span>
            <span>{{ currentWeek }}</span>
          </p>
          <p class="subtitle">{{ timeTxt }}，欢迎回来！</p>
          <h3 class="title">用户名：{{ userInfo.username }}</h3>
        </div>
      </div>
    </el-card>
    <div class="bottoms">
      <svg-icon name="welcome" width="600px" height="300px"></svg-icon>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import { ref, onBeforeUnmount } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const clock = ref(null);
const currentTime = ref("");
const currentDate = ref("");
const currentWeek = ref("");
const timeTxt = ref("");

const weekArr = ["天", "一", "二", "三", "四", "五", "六"];

const getNowTime = () => {
  const date = moment().format("YYYY年MM月DD日");
  const time = moment().format("kk:mm:ss");
  const week = moment().day();
  currentTime.value = time + " 星期" + weekArr[week];
  currentDate.value = date;
  currentTime.value = time;
  currentWeek.value = " 星期" + weekArr[week];

  const hours = new Date().getHours();
  if (hours <= 9) {
    timeTxt.value = "早上好";
  } else if (hours <= 12) {
    timeTxt.value = "上午好";
  } else if (hours <= 18) {
    timeTxt.value = "下午好";
  } else {
    timeTxt.value = "晚上好";
  }
};

const init = () => {
  getNowTime();
  clock.value = setInterval(() => {
    getNowTime();
  }, 1000);
};

init();

onBeforeUnmount(() => {
  clock.value = null;
});
</script>

<style scoped lang="less">
.box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .bottom {
    margin-left: 20px;
    color: @default;
    font-size: 24px;
    font-weight: 900;

    .subtitle {
      letter-spacing: 4px;
      margin: 24px 0;
    }
  }
}
.bottoms {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
